<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
</head>
<link rel="stylesheet" href="/webjars/element-ui/2.15.13/lib/theme-chalk/index.css">
<script src="/webjars/vue/2.6.14/dist/vue.js"></script>
<script src="/webjars/element-ui/2.15.13/lib/index.js"></script>
<script src="/webjars/axios/1.6.2/dist/axios.js"></script>
<style>
    body{
        background-color: white;
    }
</style>
<body>
<div id="app">
    <template>
        <div slot="header">
            <el-form inline>
                <el-form-item label="账号">
                    <el-input v-model="vo.username"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="vo.name"></el-input>
                </el-form-item>
                <el-form-item label="状态筛选:">
                    <template>
                        <el-radio-group v-model="vo.state">
                            <el-radio :label="-1">全部</el-radio>
                            <el-radio :label="0">启用</el-radio>
                            <el-radio :label="1">停用</el-radio>
                        </el-radio-group>
                    </template>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="add">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="userList.data" border stripe>
            <el-table-column prop="userId" label="编号"></el-table-column>
            <el-table-column prop="userName" label="账号"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="troles.roleName" label="角色">
            </el-table-column>
            <el-table-column prop="phone" label="联系方式"></el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <span>
                        {{scope.row.userState == 1 ? '停用' : '启用'}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="{row}">
                    <el-button @click="upd(row)">修改 </el-button>
                    <el-button type="danger" @click="del(row.userId)">删除 </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--        分页-->
        <el-pagination
                :page-sizes="[3,6,9]"
                :current-page.sync="vo.pageNo"
                :page-size.sync="vo.pageSize"
                @current-change="search"
                @size-change="search"
                background
                layout="prev, pager, next,sizes"
                :total="userList.count">
        </el-pagination>
    </template>
    <!--    新增-->
    <el-dialog title="新增商品" :visible.sync="addFlag" center>
        <el-radio-group v-model="labelPosition" size="small">
            <el-radio-button label="left">左对齐</el-radio-button>
            <el-radio-button label="right">右对齐</el-radio-button>
            <el-radio-button label="top">顶部对齐</el-radio-button>
        </el-radio-group>
        <div style="margin: 20px;"></div>
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <el-form-item label="账号">
                <el-input v-model="formLabelAlign.userName"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" v-model="formLabelAlign.userPassword"></el-input>
            </el-form-item>
            <el-form-item label="角色">
                <template>
                    <el-select v-model="formLabelAlign.roleId" placeholder="请选择">
                        <el-option
                                v-for="item in roleList"
                                :key="item.roleId"
                                :label="item.roleName"
                                :value="item.roleId">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="formLabelAlign.name"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
                <el-input v-model="formLabelAlign.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="formLabelAlign.email"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-switch
                        v-model="formLabelAlign.userState"
                        active-value="0"
                        inactive-value="1"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                </el-switch>
            </el-form-item>
            <el-form-item>
                <el-button @click="insert" type="primary">提交</el-button>
                <el-button @click="call">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--    修改-->
    <el-dialog title="修改商品" :visible.sync="updateFlag" center>
        <el-form label-width="80px">
            <el-form-item label="账号">
                <el-input v-model="updateRow.userName" disabled></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="updateRow.name"></el-input>
            </el-form-item>
            <el-form-item label="角色">
                <template>
                    <el-select v-model="troles" placeholder="请选择">
                        <el-option
                                v-for="item in roleList"
                                :key="item.roleId"
                                :label="item.roleName"
                                :value="item.roleId">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>

            <el-form-item label="联系方式">
                <el-input v-model="updateRow.phone"></el-input>
            </el-form-item>

            <el-form-item  label="状态：">
                <el-radio v-model="updateRow.userState" :label="0">启用</el-radio>
                <el-radio :label="1" v-model="updateRow.userState">停用</el-radio>
            </el-form-item>
            <el-form-item>
                <el-button @click="update" type="primary">提交</el-button>
                <el-button @click="updateFlag=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

</div>
<script>
    new Vue({
        el: "#app",
        data: {
            userList: [],
            addFlag: false,
            updateFlag: false,
            roleList: [],
            updateRow:{},
            troles:'',
            vo: {
                username: "",
                name: "",
                state: -1,
                pageNo: 1,
                pageSize: 6
            },
            labelPosition: 'right',
            formLabelAlign: {
                userName: '',
                userPassword: '',
                roleId: '',
                name: '',
                phone: '',
                email: '',
                userState: 0
            }
        },
        methods: {
            search() {
                axios.get("/sys/usersearch", {params: this.vo})
                    .then(({data}) => {
                        this.userList = data;
                        console.log(data)
                    })
            },
            rolesearch() {
                axios.get("/role/search", {params: this.vo})
                    .then(({data}) => {
                        this.roleList = data.data;
                    })
            },
            add(){
                this.addFlag = true;
                this.formLabelAlign={
                    userName: '',
                    userPassword: '',
                    roleId: '',
                    name: '',
                    phone: '',
                    email: '',
                    userState: 0
                }
            },
            insert(){
                axios.post("/sys/useradd", this.formLabelAlign)
                    .then(({data}) => {
                        this.addFlag = false;
                        this.$message({
                            message:data.msg,
                            type:data.code==200?'success':'error'
                        });
                        this.search();
                    });
            },
            upd(row){
                console.log(row)
                this.updateFlag=true;
                this.updateRow=row;
                this.troles=row.troles.roleId;
            },
            update(){
                this.updateRow.roleId=this.troles
                axios.put('/sys/edit',this.updateRow)
                    .then(({data})=>{
                        this.updateFlag=false;
                        this.$message({
                            message:data.msg,
                            type:data.code==200?'success':'error'
                        });
                        this.search();
                    });
            },
            call(){
                this.addFlag=false;
                this.reset();
            },
            del(id) {
                this.$confirm("确实要删除么？", "信息提示")
                    .then(() => {
                        axios.delete("/sys/del?id=" + id)
                            .then(({data}) => {
                                this.$message({
                                    message: data.msg,
                                    type: data.code == 200 ? 'success' : 'error'
                                });
                                this.search()
                            });
                    })
            },
            reset(){
                this.formLabelAlign.userName='',
                this.formLabelAlign.userPassword='',
                this.formLabelAlign.roleId='',
                this.formLabelAlign.name='',
                this.formLabelAlign.phone='',
                this.formLabelAlign.email='',
                this.formLabelAlign.userState=0;
            }
        },
        mounted() {
            this.search();
            this.rolesearch();
        }
    });
</script>
</body>
</html>